<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>thumb</title>

<link rel="stylesheet" href="../styles/uigg.css">

<script src="../js/jquery.min.js"></script>
<script src="../js/uigg.js"></script>
</head>

<body>

<!----------------------------------------------------------------------------------------->

<chat>
    <chat-sider>
        <chat-title>
            <hop>
                <a class="ico ico-add"></a>
                <hop-cont>
                    <a>link</a>
                    <a>link</a>
                    <a>link</a>
                </hop-cont>
            </hop>
            <input type="text" placeholder="search">
            <a class="ico ico-search"></a>
        </chat-title>
        <chat-list>
            <li>
                <a class="active"><em class="avatar" uigg="avatar"></em>
                    <div class="flex-auto">
                        <div class="flex"><h6>name</h6><span>00:00</span></div>
                        <span>message</span>
                    </div>
                </a>
            </li>
            <li>
                <a><em class="avatar" uigg="avatar"></em>
                    <div class="flex-auto">
                        <div class="flex"><h6>name</h6><span>00:00</span></div>
                        <span>message</span>
                    </div>
                </a>
            </li>
            <li>
                <a><em class="avatar" uigg="avatar"></em>
                    <div class="flex-auto">
                        <div class="flex"><h6>name</h6><span>00:00</span></div>
                        <span>message</span>
                    </div>
                </a>
            </li>
            <li>
                <a><em class="avatar" uigg="avatar"></em>
                    <div class="flex-auto">
                        <div class="flex"><h6>name</h6><span>00:00</span></div>
                        <span>message</span>
                    </div>
                </a>
            </li>
            <li>
                <a class="disable"><em class="avatar" uigg="avatar"></em>
                    <div class="flex-auto">
                        <div class="flex"><h6>name</h6><span>00:00</span></div>
                        <span>message</span>
                    </div>
                </a>
            </li>
        </chat-list>
    </chat-sider>
    <chat-cont>
        <chat-title><h3>name</h3>
            <a href="tel:" class="ico ico-call"></a>
            <a class="ico ico-camera"></a>
            <a class="ico ico-user-group"></a>
            <a class="ico ico-set"></a>
            <x class="ico ico-close"></x>
        </chat-title>
        <chat-message>
            <li>
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><p uigg="title"></p></aside>
            </li>
            <li>
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><s style="background-image: url(//ui.gg/lib/emot/1.svg)"></s></aside>
            </li>
            <li>
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><img uigg="img"></aside>
            </li>
            <li>
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><video src="//ui.gg/lib/media/video.mp4" controls></video></aside>
            </li>
            <li>
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><audio src="//ui.gg/lib/media/audio.mp3" controls></audio></aside>
            </li>
            <li class="mine">
                <em class="avatar" uigg="avatar"></em>
                <cite>00:00:00</cite>
                <aside><p uigg="title"></p></aside>
            </li>
        </chat-message>
        <chat-tool>
            <a class="ico ico-emot-smile"></a>
            <chat-tip><div uigg="emot"></div></chat-tip>
            <a class="ico ico-folder-empty"><input type="file"></a>
        </chat-tool>
        <chat-control>
            <aside contenteditable="true"></aside>
            <a class="ico ico-arrow-enter"></a>
        </chat-control>
    </chat-cont>
</chat>

<!----------------------------------------------------------------------------------------->

</body>
</html>